home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Dynamic Content / iframe-ssi-script.izs < prev    next >
Text File  |  2005-09-01  |  8KB  |  146 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Iframe SSI script
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+<!/BROWSER>
  7.  
  8. <!DESCRIPTION>Want to dynamically include the contents of another page onto the current without resorting to server side means (ie: server side includes)? This script uses the IFRAME tag, and by automatically resizing it based on the actual height of the containing page, allows you to seamlessly display external content on your page. In other words, the iframe is automatically resized to be only as tall as the external page's height. The script works in both IE5+ and NS6+, and for other browsers, supports the option to either completely hide the iframe in question or display it using its default height. Now that's SSI DHTML style!
  9.  
  10. Note that as with SSI, the external page referenced by the iframe must be from the same domain as the page the iframe tag is inserted in. Setting the iframe's src to an external site such as "http://www.google.com" will not work, since the script cannot probe and detect the height of pages from external domains.
  11.  
  12.  
  13. <!/DESCRIPTION> 
  14.  
  15. <!CATEGORY>dynamic content<!/CATEGORY>
  16.  
  17. <!SCRIPT>
  18. <!-- START OF SCRIPT -->
  19. <!-- Step 1: Insert the below script into the HEAD section of your page: -->
  20. <script type="text/javascript">
  21.  
  22. /***********************************************
  23. * IFrame SSI script- ⌐ Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
  24. * Visit DynamicDrive.com for hundreds of original DHTML scripts
  25. * This notice must stay intact for legal use
  26. ***********************************************/
  27.  
  28. //Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
  29. //Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
  30. var iframeids=["myframe"]
  31.  
  32. //Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
  33. var iframehide="yes"
  34.  
  35. var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
  36. var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
  37.  
  38. function dyniframesize() {
  39. var dyniframe=new Array()
  40. for (i=0; i<iframeids.length; i++){
  41. if (document.getElementById){ //begin resizing iframe procedure
  42. dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
  43. if (dyniframe[i] && !window.opera){
  44. dyniframe[i].style.display="block"
  45. if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //ns6 syntax
  46. dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight+FFextraHeight; 
  47. else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //ie5+ syntax
  48. dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
  49. }
  50. }
  51. //reveal iframe for lower end browsers? (see var above):
  52. if ((document.all || document.getElementById) && iframehide=="no"){
  53. var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
  54. tempobj.style.display="block"
  55. }
  56. }
  57. }
  58.  
  59. if (window.addEventListener)
  60. window.addEventListener("load", dyniframesize, false)
  61. else if (window.attachEvent)
  62. window.attachEvent("onload", dyniframesize)
  63. else
  64. window.onload=dyniframesize
  65.  
  66. </script>
  67. <!-- Step 2: Having done the above, define the IFRAMEs you wish to be automatically resized, and insert them onto your page. An example looks like: -->
  68. <iframe id="myframe" src="externalpage.htm" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>
  69. <!-- Read on for configuration instructions.
  70.  
  71. Configuring the script
  72. To configure this script, first, set the variables inside the script of Step 1 per the comments. As you can see, you can specify more than one iframe on the page in which the script should dynamically resize.
  73.  
  74. Secondly, for the code of Step 2, be sure the ID (ie: "myframe") matches the ID entered into the script, so the script knows which IFRAMEs to adjust. You may also change the width attribute (ie: 100%) to a different value, as the script only changes the height of the iframe, but not the width.
  75.  
  76. Finally, in the script of Step 1, there is a variable that toggles whether browsers that don't support this script (non IE5+/NS6+) should still see the iframe(s) or not. Generally you should choose to hide the iframe in these non compatible browsers (Opera 7 included), as the iframe's height is hardwired in these cases, and part of the external page most likely will be clipped and unviewable to the viewer if the external page's height exceeds the iframe's default height.
  77. -->
  78. <!-- END OF SCRIPT -->
  79. <!/SCRIPT>
  80.  
  81. <!PREVIEW>
  82. <!-- START OF SCRIPT -->
  83.  
  84. <!-- Step 1: Insert the below script into the HEAD section of your page: -->
  85. <script type="text/javascript">
  86.  
  87. /***********************************************
  88. * IFrame SSI script- ⌐ Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
  89. * Visit DynamicDrive.com for hundreds of original DHTML scripts
  90. * This notice must stay intact for legal use
  91. ***********************************************/
  92.  
  93. //Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
  94. //Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
  95. var iframeids=["myframe"]
  96.  
  97. //Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
  98. var iframehide="yes"
  99.  
  100. var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
  101. var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers
  102.  
  103. function dyniframesize() {
  104. var dyniframe=new Array()
  105. for (i=0; i<iframeids.length; i++){
  106. if (document.getElementById){ //begin resizing iframe procedure
  107. dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
  108. if (dyniframe[i] && !window.opera){
  109. dyniframe[i].style.display="block"
  110. if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //ns6 syntax
  111. dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight+FFextraHeight; 
  112. else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //ie5+ syntax
  113. dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
  114. }
  115. }
  116. //reveal iframe for lower end browsers? (see var above):
  117. if ((document.all || document.getElementById) && iframehide=="no"){
  118. var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
  119. tempobj.style.display="block"
  120. }
  121. }
  122. }
  123.  
  124. if (window.addEventListener)
  125. window.addEventListener("load", dyniframesize, false)
  126. else if (window.attachEvent)
  127. window.attachEvent("onload", dyniframesize)
  128. else
  129. window.onload=dyniframesize
  130.  
  131. </script>
  132. <!-- Step 2: Having done the above, define the IFRAMEs you wish to be automatically resized, and insert them onto your page. An example looks like: -->
  133. <iframe id="myframe" src="externalpage.htm" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>
  134. <!-- Read on for configuration instructions.
  135.  
  136. Configuring the script
  137. To configure this script, first, set the variables inside the script of Step 1 per the comments. As you can see, you can specify more than one iframe on the page in which the script should dynamically resize.
  138.  
  139. Secondly, for the code of Step 2, be sure the ID (ie: "myframe") matches the ID entered into the script, so the script knows which IFRAMEs to adjust. You may also change the width attribute (ie: 100%) to a different value, as the script only changes the height of the iframe, but not the width.
  140.  
  141. Finally, in the script of Step 1, there is a variable that toggles whether browsers that don't support this script (non IE5+/NS6+) should still see the iframe(s) or not. Generally you should choose to hide the iframe in these non compatible browsers (Opera 7 included), as the iframe's height is hardwired in these cases, and part of the external page most likely will be clipped and unviewable to the viewer if the external page's height exceeds the iframe's default height.
  142. -->
  143. <!-- END OF SCRIPT -->
  144. <!/PREVIEW>
  145.  
  146. <!RELATED>NONE<!/RELATED>